<!doctype html>
<html>
<head>
<!--手机meta-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
viewport 视窗
device 设备
initial 初始化
maximum 最大

media 媒体



PC32响应移动端的布局技巧：

将模块隐藏或显示

显示模块的局部

不同尺寸列数不同

-->
<link href="gongyong.css" rel="stylesheet">
<style>

/*广告区修饰*/
.banner_box{padding-top:48px;padding-bottom:86px;display:flex;justify-content:center;align-items:center;overflow:hidden;}
@media (max-width:580px){
	.banner_box{padding-bottom:10px;padding-top:10px;}
	.banner_box img{width:80%;}
}
/*作品分类*/
.zuopin_fenlei{display:flex;justify-content: center;padding-bottom:50px;}
.zuopin_fenlei a{margin:0 35px;line-height:40px;}
@media (max-width:580px){
	.zuopin_fenlei{display:none;}
}
/*作品列表*/
.zuopin_zhanshi{max-width:1200px;margin:0 auto;}
.zuopin_lie{float:left;width:calc((100% - 80px) / 3);margin-right:40px;padding-bottom:60px;}
.zuopin_lie:nth-child(3n){margin-right:0;}
@media (max-width:580px){
	.zuopin_lie{width:calc(100% - 40px);margin:0 20px;}
}
.zuopin_lie h1{color:white;line-height:37px;margin-top:8px;}
.zuopin_lie h1 a{color:white;}
.zuopin_lie p{color:#6f6f6f;line-height:20px;font-size:14px;}
.zuopin_lie span{color:#3e3e3e;font-size:12px;float:right;}
.zuopin_tu{overflow:hidden;}
.zuopin_tu img{width:100%;transition:.6s;}
.zuopin_lie:hover img{transform:scale(1.2);}

</style>
<meta charset="utf-8">
<title>18900401-邓玉石-作业展示网站-首页</title>
</head>

<body>
<!--页头导航-->
<div class="dingbu_beijing"> 
	<div class="dingbu_juzhong">
		<div class="logo_box"><img class="logo" src="img/cqgcxy_logo.png"></div>
		<ul class="nav">
			<li><a class="current" href="">首页<span></span></a></li>
			<li><a href="">经验<span></span></a></li>
			<li><a href="">作品<span></span></a></li>
			<li><a href="">技术<span></span></a></li>
			<li><a href="">关于我们<span></span></a></li>
			<li><a href="">加入团队<span></span></a></li>
		</ul>
		<div class="gongneng">
			<a href="">当前用户：</a>
			<a href="">189000401 邓玉石</a>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!--广告区域-->
<div class="banner_box"><img class="banner_img" src="img/image.jpg"></div>
<!--作品分类-->
<div class="zuopin_fenlei" style="font-size: 43px; ">
	<!-- <a href="">平面物料</a>
	<a href="">网站网页</a>
	<a href="">移动界面</a> -->
	<a href="">Welcome to my homework presentation</a>
</div>
<!--作品列表-->
<div class="zuopin_zhanshi">
	<!--作品每一列-->
		<div class="zuopin_lie">
			<div class="zuopin_tu">
				<a href="../liuyang/work/one.html"><img class="image" src="img/第一次作业.png"></a>
			</div>
			<h1><a href="../liuyang/work/one.html">第一次作业</a></h1>
			<p><a href="../liuyang/work/one.html">根据图片用js写出样式--(document.write())</a></p>
			<span>2021-3-10</span>
		</div>
		<!--作品每一列-->
		<div class="zuopin_lie">
			<div class="zuopin_tu">
				<a href="../liuyang/work/two_work.html"><img class="image" src="img/第二次_2.png"></a>
			</div>
			<h1>第二次作业</h1>
			<p>用户输入一个数字分别产生，三角形，平行四边形，菱形</p>
			<span>2021-3-21</span>
		</div>
		<!--作品每一列-->
		<div class="zuopin_lie">
			<div class="zuopin_tu">
				<a href="../liuyang/work/list.html"><img class="image" src="img/img.png"></a>
			</div>
			<h1>第三次作业</h1>
			<p>完成上课实验</p>
			<span>2021-3-28</span>
		</div>
		<!--作品每一列-->
		<div class="zuopin_lie">
			<div class="zuopin_tu">
				<a href="../liuyang/work/tank.html"><img class="image" src="img/tank.png"></a>
			</div>
			<h1>第四次作业</h1>
			<p>坦克活动</p>
			<span>2021-5-8</span>
		</div>
		<!--作品每一列-->
		<div class="zuopin_lie">
			<div class="zuopin_tu">
				<a href="../liuyang/work/expe05.html"><img class="image" src="img/img_tt.png"></a>
			</div>
			<h1>第五次作业</h1>
			<p>针对图片的操作</p>
			<span>2021-5-17</span>
		</div>
		
		<div class="zuopin_lie">
			<div class="zuopin_tu">
				<a href="../liuyang/work/advertising .html"><img class="image" src="img/6.png"></a>
			</div>
			<h1>第六次作业</h1>
			<p>针对图片的操作</p>
			<span>2021-5-17</span>
		</div>

		<div class="zuopin_lie">
			<div class="zuopin_tu">
				<a href="../liuyang/work/text7.html"><img class="image" src="img/7.png"></a>
			</div>
			<h1>第七次作业</h1>
			<p>针对图片的操作</p>
			<span>2021-5-17</span>
		</div>

		<div class="zuopin_lie">
			<div class="zuopin_tu">
				<a href="../liuyang/work/test7.html"><img class="image" src="test7_img/playerbig_right.gif"></a>
			</div>
			<h1>第八次作业</h1>
			<p>jquery作业</p>
			<span>2021-5-27</span>
		</div>

	</div>
	
	
	<!--作品每一列-->
	<!-- <div class="zuopin_lie">
		<div class="zuopin_tu">
			<img src="img/zuopin01.png">
		</div>
		<h1>青岛创维科技 LOGO 设计</h1>
		<p>青岛创维科技公司，是一家专门从事软件开发的中小型公司...</p>
		<span>2019-3-10</span>
	</div> -->
	<!--作品每一列-->
	<!-- <div class="zuopin_lie">
		<div class="zuopin_tu">
			<img src="img/zuopin01.png">
		</div>
		<h1>青岛创维科技 LOGO 设计</h1>
		<p>青岛创维科技公司，是一家专门从事软件开发的中小型公司...</p>
		<span>2019-3-10</span>
	</div> -->
	<!--作品每一列-->
	<!-- <div class="zuopin_lie">
		<div class="zuopin_tu">
			<img src="img/zuopin01.png">
		</div>
		<h1>青岛创维科技 LOGO 设计</h1>
		<p>青岛创维科技公司，是一家专门从事软件开发的中小型公司...</p>
		<span>2019-3-10</span>
	</div> -->
	<!--作品每一列-->
	<!-- <div class="zuopin_lie">
		<div class="zuopin_tu">
			<img src="img/zuopin01.png">
		</div>
		<h1>青岛创维科技 LOGO 设计</h1>
		<p>青岛创维科技公司，是一家专门从事软件开发的中小型公司...</p>
		<span>2019-3-10</span>
	</div>
	<div class="clearfix"></div>
</div> -->
<!--页脚-->
	<!-- <div class="footer">
		COPYRIGHT 版权所有 DHYIDEAS 设计工作室
		<img src="img/footer_logo.png">
		<div class="share">
			<a href="">微信</a>
			<a href="">微博</a>
		</div>
	</div> -->
</body>
	
</html>












